<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">发证方注册</div>
    </div>
    <div class="ci_note">
      <DescriptionBlock data="展示发证方注册信息" />
    </div>
    <div class="ci_des" v-if="!isRegister">
      <div class="title_personal">发证方注册</div>
    </div>
    <div class="ci_des" v-if="!isRegister">
      <el-form
        :model="form"
        ref="LssuerFormRef"
        style="width: 100%"
        :rules="LssuerFormRefRules"
        label-width="120px"
      >
        <el-form-item label="发证方名称：" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="请输入发证方名称"
          />
        </el-form-item>
        <el-form-item label="发证方DID：" prop="did">
          <el-select
            v-model="form.did"
            clearable
            placeholder="请选择发证方DID"
            style="width: 100%"
          >
            <el-option
              v-for="item of did.didList"
              :label="item.did"
              :value="item.did"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="签发类型：" prop="serviceType">
          <el-select
            v-model="form.serviceType"
            clearable
            placeholder="请选择签发类型"
            style="width: 100%"
          >
            <el-option
              v-for="(item, key) in type"
              :label="item"
              :value="key"
              :key="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="简单描述：" prop="shortDescription">
          <el-input
            type="textarea"
            v-model.trim="form.shortDescription"
            placeholder="请输入简单描述(50个字符以内)"
          />
        </el-form-item>
        <el-form-item label="详细描述：" prop="longDescription">
          <el-input
            type="textarea"
            v-model.trim="form.longDescription"
            placeholder="请输入详细描述(150个字符以内)"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="isLoading"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="ci_des" v-if="isRegister">
      <el-form label-width="120px">
        <el-form-item label="名称：">
          {{ DetailObj.name }}
        </el-form-item>
        <el-form-item label="DID：">
          {{ DetailObj.did }}
        </el-form-item>
        <el-form-item label="状态：">
          {{
            DetailObj.status === "0"
              ? "待审核"
              : DetailObj.status === "1"
              ? "正常"
              : DetailObj.status === "2"
              ? "停用"
              : "--"
          }}
        </el-form-item>
        <el-form-item label="签发类型：">
          {{ type[DetailObj.serviceType] }}
        </el-form-item>
        <el-form-item label="公钥：">
          {{ DetailObj.pubKey }}
        </el-form-item>
        <el-form-item label="创建时间：">
          {{ DetailObj.createdTime }}
        </el-form-item>
        <el-form-item label="编号：">
          {{ DetailObj.id }}
        </el-form-item>
        <el-form-item label="服务地址：">
          {{ DetailObj.endpoint }}
        </el-form-item>
        <el-form-item label="简单描述：">
          {{ DetailObj.shortDescription }}
        </el-form-item>
        <el-form-item label="详细描述：">
          {{ DetailObj.longDescription }}
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { DescriptionBlock } from "../../components/index";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { lssuerRegisterApi, lssuerDetailNoIdApi} from "@/api/RegisterCenter";
import { DIDListEnumApi} from "@/api/DID";
import {
  nameValidator,
} from "@/utils/validate";

const LssuerFormRef = ref("form");
let did = reactive({
  didList: [],
});
const form = reactive({
  name: "",
  did: "",
  shortDescription: "",
  longDescription: "",
  serviceType: "",
});
const DetailObj = ref({});
const isRegister = ref(false);
const type = reactive({
  "00": "实名认证",
  // FingerprintAuthentication: "指纹认证",
  // EnterpriseAuthentication: "企业认证",
  // BusinessAuthentication: "商户认证",
  // VIPAuthentication: "大客户认证",
});
const isLoading = ref(false);
/** 发证方名称校验 */
const validateRegisterName = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("发证方名称不能为空"));
  } else {
    // 校验昵称
    if (!nameValidator(value)) {
      rule.message =
        "2-36位字符，不能以特殊字符及数字开头，只可包含特殊字符中的'.','_'或'-'";
      callback(new Error());
    } else {
      callback();
      // 注意，这个空的callback非常重要，没有它作为结束，整个校验会出问题
    }
  }
};
/** 表单校验规则 */
const LssuerFormRefRules = {
  name: [
    {
      required: true,
      validator: validateRegisterName,
      message: "2-50位字符，不能以特殊字符及数字开头，只可包含特殊字符中的'.','_'或'-'",
      trigger: "blur",
    },
    { 

      min: 2,
      max: 50,
      message: "2-50位字符，不能以特殊字符及数字开头，只可包含特殊字符中的'.','_'或'-'", trigger: "blur" },
  ],
  serviceType: [
    {
      required: true,
      message: "请输入签发类型",
      trigger: "blur",
    },
  ],
  did: [
    {
      required: true,
      message: "请输入发证方DID",
      trigger: "blur",
    },
  ],
  shortDescription: [
    { max: 50, message: "请输入简单描述,(50个字符以内)", trigger: "blur" },
  ],
  longDescription: [
    { max: 150, message: "请输入详细描述,(150个字符以内)", trigger: "blur" },
  ],
};
const onSubmit = () => {
  LssuerFormRef.value?.validate(async (valid) => {
    if (valid) {
      isLoading.value = true;
      let parmars = {
        ...form,
      };
      lssuerRegisterApi(parmars)
        .then((res) => {
          if (res.success) {
            ElMessage.success(res.msg || "发证方注册成功!");
            isLoading.value = false;
            isRegister.value = true;
            LssuerInfo();
          } else {
            ElMessage.error(res.msg || "发证方注册失败!");
            isLoading.value = false;
            isRegister.value = false;
          }
        })
        .catch((err) => {
          ElMessage.error(err.msg || "发证方注册失败!");
          isLoading.value = false;
          isRegister.value = false;
        });
    } else {
      return false;
    }
  });
};
const LssuerInfo = () => {
  lssuerDetailNoIdApi()
    .then((res) => {
      if (res.success && res.data) {
        isRegister.value = true;
        DetailObj.value = res.data || {};
      } else {
        isRegister.value = false;
      }
    })
    .catch((err) => {
      ElMessage.success(err.msg);
      isRegister.value = false;
    });
};
const lssuerListEnum = () => {
  DIDListEnumApi()
    .then((res) => {
      if (res.success) {
        did.didList = res.data.list || [];
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.msg);
    });
};
onMounted(() => {
    LssuerInfo();
  lssuerListEnum();
});
</script>

<style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";

.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
</style>
    
    
    
    
    
    
    